<template>
	<view class="">
		<u-tabs :list="menu" :menuColor='menuColor' lineWidth="30" :lineColor='lineColor' :scrollable='scrollable'
			:keyName='keyName' :activeStyle="{
						color: active_c,
						fontWeight: '500',
						fontSize:active_fs,
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color:inactive_c,
						fontWeight: '400',
						fontSize:inactive_fs,
			            transform: 'scale(1)'
			        }" :current='current' @change='changeTabs'>
		</u-tabs>

		<!-- 使用
		 <stateMenu :menu='menu' menuColor='#fff' :active_c='zt_c' inactive_c='#333' :lineColor='zt_c' :current.sync='current' 
		     @changeTab='changeTab'>
		 </stateMenu>
		 -->
	</view>
</template>

<script>
	export default {
		props: {
			menu: { //菜单列表
				default: () => []
			},
			current: { //标识
				default: () => 0
			},
			scrollable: { //是否滑动
				default: () => true
			},
			menuColor: { //背景颜色
				default: () => 'rgba(0,0,0,0)'
			},
			active_c: { //选中的颜色
				default: () => '#fff'
			},
			active_fs: { //选中的字号
				default: () => '28rpx'
			},
			inactive_c: { //未选中的颜色
				default: () => '#fff'
			},
			inactive_fs: { //未选中的字号
				default: () => '28rpx'
			},
			lineColor: { //滑块颜色
				default: () => '#fff'
			},
			keyName: { //属性名
				default: () => 'name'
			}
		},
		components: {},
		data() {
			return {

			}
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			changeTabs(e) {
				this.$emit('update:current', e.index)
				this.$emit('changeTab', e.index)
			}
		},
		computed: {

		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>
</style>